<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank">
          Core Docs
        </a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank">
          Forum
        </a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank">
          Community Chat
        </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank">
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank">
          vue-router
        </a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank">
          vuex
        </a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank">
          vue-loader
        </a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank">
          awesome-vue
        </a>
      </li>
      <li>
        <router-link to='/slot1'>
          demo1
        </router-link>
      </li>
      <li>
        <router-link to='/slot2'>
          demo2
        </router-link>
      </li>
      <li>
        <router-link to='/slot3'>
          demo3
        </router-link>
      </li>
      <li>
        <router-link to='/chart'>
          chart
        </router-link>
      </li>
      <li>
        <router-link to='/chart1'>
          chart1
        </router-link>
      </li>
      <li>
        <router-link to='/chart2'>
          chart2
        </router-link>
      </li>
      <li>
        <router-link to='/chart3'>
          chart3
        </router-link>
      </li>
      <li>
        <router-link to='/call'>
          call&apply
        </router-link>
      </li>
      <li>
        <router-link to='/d3_line'>
          d3_line
        </router-link>
      </li>
      <li>
        {{num = parseInt((num2/num1))}}
      </li>
      <li>
        <router-link to="/mock">
            mock
        </router-link>
      </li>
    </ul>
    <br>
    <Plus></Plus>


  </div>
</template>

<script>
  import Plus from '@/components/Plus'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        num1: 2,
        num2: 5.5,
        timeStr: 'HH:mm',
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      // this.pattern(this.timeStr)
    },
    components: {
      Plus
    },
    methods: {
      intMethod(num) {
        var res = parseInt(num)
        return res

      },
      ale() {
        alert(666)
      },
      sel() {

      },
      change() {
        console.log(this.$refs.sel)
this.$refs.sel.size = this.$refs.sel.length;

      },
      open(elem) {
        console.log(elem)
        if (document.createEvent) {
          var e = document.createEvent("MouseEvents");
          e.initMouseEvent("mousedown", true, true);
          elem[0].dispatchEvent(e);
        } else if (element.fireEvent) {
          elem[0].fireEvent("onmousedown");
        }
      },
      pattern(timeStr) {
        console.log(new Date())
        console.log(new Date().pattern(timeStr))
        setInterval(function () {

        }, 1000)
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

</style>
